<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="shortcut icon" href="/img/favicon.ico">
    <link rel="stylesheet" href="/plugs/bootstrap-4.6.2-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/bootstrap-expand.css">
    <link rel="stylesheet" href="/plugs/iconfont/iconfont.css">

    <link rel="stylesheet" href="/plugs/bootstrap-switch/bootstrap-switch.css">
    <link rel="stylesheet" href="/plugs/bootstrap-pagination/bootstrap-pagination.css">
    <link rel="stylesheet" href="/plugs/bootstrap-select-1.13.9/dist/css/bootstrap-select.min.css">
    <link rel="stylesheet" href="/plugs/bootstrap-dialog/bootstrap-dialog.css">
    <link rel="stylesheet" href="/plugs/bootstrap-dialog/toastr.min.css">
    <link rel="stylesheet" href="/plugs/bootstrap-dialog/bootstrap-dialog-expand.css">
    <link rel="stylesheet" href="/plugs/bootstrap-submenu-3.0.1/dist/css/bootstrap-submenu.css">
    <link rel="stylesheet" href="/plugs/bootstrap-treetable/bootstrap-treetable.css">

    <!--导航栏样式参考   https://www.fengnayun.com/news/content/106448.html-->
    <style type="text/css">
        .navbar.black{
            background-color: #333 !important;
        }
        .navbar.black .navbar-collapse .nav-item a{
            color: #fff !important;
        }
        .navbar.black .dropdown-menu{
            background-color: #333;
        }
        .navbar.black .dropdown-menu .dropdown-item{
            color: #fff;
        }
        .navbar.black button.dropdown-item{
            background-color: #333;
        }

      .static-tab{
        height: calc(100% - 86px);
      }
      .navbar .navbar-nav .nav-link {
          padding: 15px 20px;
      }
      .navbar .dropdown-item{
          padding: 15px 40px;
      }
      .navbar .dropdown-menu{
          background:#f8f9fa;
          padding: 0px;
          margin: 0px;
          z-index: 5000;
        }
        .navbar .dropdown-menu .dropdown-item{
            color: #000;
        }
        .navbar .dropdown-toggle::after {
            margin-left: 0.95em;
        }

        .navbar .dropdown-menu .dropdown-item:hover{
            color:#FFF;
            background:#4b545f;
        }

</style>
    <script type="text/javascript" src="/js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="/js/JSON.js"></script>
    <script type="text/javascript" src="/plugs/date.js"></script>
    <script type="text/javascript" src="/plugs/serializable.js"></script>


    <script type="text/javascript" src="/plugs/bootstrap-4.6.2-dist/poper-1.12.5/popper.min.js"></script>
    <script type="text/javascript" src="/plugs/bootstrap-4.6.2-dist/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/plugs/bootstrap-switch/bootstrap-switch.min.js"></script>
    <script type="text/javascript" src="/plugs/bootstrap-pagination/bootstrap-pagination.js"></script>
    <script type="text/javascript" src="/plugs/bootstrap-select-1.13.9/dist/js/bootstrap-select.min.js"></script>
    <script type="text/javascript" src="/plugs/bootstrap-select-1.13.9/dist/js/i18n/defaults-zh_CN.min.js"></script>

    <script type="text/javascript" src="/plugs/bootstrap-dialog/bootstrap-dialog.js"></script>
    <script type="text/javascript" src="/plugs/bootstrap-dialog/toastr.min.js"></script>
    <script type="text/javascript" src="/plugs/bootstrap-dialog/bootstrap-dialog-expand.js"></script>

    <script type="text/javascript" src="/js/tree.js"></script>
    <script type="text/javascript" src="/plugs/bootstrap-submenu-3.0.1/dist/js/bootstrap-submenu.min.js"></script>
    <script type="text/javascript" src="/plugs/bootstrap-submenu-3.0.1/dist/js/bootstrap-navbar.js"></script>

    <script type="text/javascript" src="/plugs/bootstrap-treetable/bootstrap-treetable.js"></script>
    <script type="text/javascript" src="/plugs/bootstrap-viewer-master/dist/bootstrap.viewer.js"></script>
</head>
<script type="text/javascript">
    $(function () {
        $.ajax({
            url: "/dms/resource/selectList?status=1",
            type: "GET",
            success: function (data) {
                $('#navbar').bootstrapNavbar({
                    target :"#tab",
                    data : data ,
                    isTree : false,
                    rootId : 0,
                    parentId : "parentId",
                    id : "id",
                    name : "name" ,
                    url: "route",
                    children : "children"
                });
                //默认显示首页
                $('#navbar').bootstrapNavbar("trigger",0);
            }
        })
    });
</script>


<body>
    <nav id="navbar" class="black"></nav>

    <div id="tab" class="static-tab"></div>
</body>
</html>